<template>
	<view class="">
		<NavBar title="设置头像" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="set_box">
			<button throttleTime="1000" @chooseavatar="chooseavatar" openType="chooseAvatar">
				<text class="f_28_6">用户头像</text>
				<view class="flex">

					<view class="m_r_6">
						<up-icon :name="userAvatar" color="#333333" size="38"></up-icon>
					</view>
					<up-icon name="arrow-right" color="#333333" size="16"></up-icon>
				</view>
			</button>

		</view>
		<view class="submit_btn m_t_78 ">
			<up-button throttleTime="1000" @click="onSubmit">
				<text class="f_30_f_b">
					确定
				</text>
			</up-button>
		</view>
		<!-- <view class="next_box">
			<view class="btn f_28_9" @click="onJump">跳过</view>
		</view> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const uToastRef = ref(null)
	const oldAvatar = ref()
	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 80 + 94}rpx)`
			}
		});
		if (e.avatar) {
			oldAvatar.value = JSON.parse(JSON.stringify(e.avatar))
			userAvatar.value = e.avatar
		}
	})
	// 获取头像
	const userAvatar = ref('/static/images/my/default_avatar.png')
	const chooseavatar = (e) => {
		userAvatar.value = e.detail.avatarUrl
	}
	// 保存
	const onSubmit = async () => {
		if (oldAvatar.value == userAvatar.value) {
			uni.$u.toast('头像并未发生改变')
			return
		}
		const result = await uploadFilePromise(userAvatar.value);
		uni.showLoading({
			title: "保存中"
		})
		let res = await proxy.$http("my.updateavatar", { avatar: result })
		uni.hideLoading()
		if (res.code == 1) {
			uni.$u.toast('保存成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		} else {
			uToastRef.value.show({
				message: res.msg
			})
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: proxy.$config.baseUrl + '/api/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl);
					}, 1000);
				},
			});
		});
	};
	// 跳过
	const leftClick = () => {
		uni.navigateBack()
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 30rpx;
		padding-bottom: 64rpx;

		.set_box {
			::v-deep button {
				width: 690rpx !important;
				height: 100rpx !important;
				background: #ffffff !important;
				border-radius: 16rpx !important;
				display: flex !important;
				justify-content: space-between !important;
				align-items: center !important;
				border: 0 !important;
			}

			button::after {
				border: none;
			}

			::v-deep.u-icon:nth-child(1) {
				border-radius: 50%;
				overflow: hidden;
			}


		}


	}

	.submit_btn {
		::v-deep.u-button {
			width: 684rpx !important;
			height: 96rpx !important;
			background: #FD6C25 !important;
			border-radius: 48rpx !important;
		}
	}

	.next_box {
		display: flex;
		justify-content: center;
		margin-top: 8rpx;

		.btn {
			padding: 8rpx 10rpx;
		}

	}
</style>